<template>
	<div>
		<Row>
			<Col class="p-1" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" :xxl="4">
			<Input class="w-100"  v-model="searchKey.pName" placeholder="请输入权限名称" />
			</Col>
		</Row>
		<div class="p-1 d-flex justify-content-between">
			<Button class="m-1" type="error"  shape="circle" @click="newPermission" icon="md-add">新增</Button>
			<Button class="m-1" type="primary" shape="circle" @click="searchs" icon="ios-search">查询</Button>
		</div>
		<div class="mt-1 d-none d-xl-block">
			<Table border :class="'m-1'" :columns="tableInfo.columnInfo" :data="tableInfo.data">
				<template slot-scope="{ row, index }" slot="status">
					<span class="text-primary" v-if="row.aFlg">开</span>
					<span class="text-danger" v-else>关</span>
				</template>
				<template slot-scope="{ row, index }" slot="leixing">
					<span :style="{'background-color':CONST.getPermissionTypeName(row.type).color}" class="text-white px-2 rounded-pill">
					<Icon :type="CONST.getPermissionTypeName(row.type).icon" />
					{{CONST.getPermissionTypeName(row.type).name}}</span>
				</template>
				<template slot-scope="{ row, index }" slot="action">
					<Button type="primary" size="small" style="margin-right: 5px" @click="show(row.code)">详细</Button>
					<Button type="error" size="small" @click="remove(row.code)">删除</Button>
				</template>
			</Table>
			
		</div>
		<div class="mt-1 d-xl-none">
			<Row>
				<Col class="p-1" v-for="(row, index) in tableInfo.data" :xs="24" :sm="24" :md="12" :lg="12">
					<div class="text-xss rounded shadow text-secondary p-1 bg-light">
						<div class="p-1 d-flex justify-content-between">
							<span>权限码 </span><span>{{row.code}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>权限名称 </span><span>{{row.name}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>权限路径 </span><span>{{row.path}}</span>
						</div>
						
						<div class="p-1 d-flex justify-content-between">
							<span>类型 </span>
							<span :style="{'background-color':CONST.getPermissionTypeName(row.type).color}" class="text-white px-2 rounded-pill">
							<Icon :type="CONST.getPermissionTypeName(row.type).icon" />
							{{CONST.getPermissionTypeName(row.type).name}}</span>
						</div>
						<div class="p-1 d-flex justify-content-between">
							<span>状态 </span>
							<span class="text-primary" v-if="row.aFlg">开</span>
							<span class="text-danger" v-else>关</span>
						</div>
						<div class="p-1 d-flex justify-content-end">
							<Button class="text-xss" type="error" size="small" @click="remove(row.code)">删除</Button>
							<Button class="text-xss ml-2" type="primary"  size="small" @click="show(row.code)">详细</Button>
							
						</div>
					</div>
				</Col>
			</Row>
		</div>
		
		<div>
			<Page class="text-right mt-3" :page-size="pageInfo.pageSize" @on-change="pageSearch"
				:total="pageInfo.total" />
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
					pageInfo: {
						current: 1,
						total: 0,
						size: 10,
					},
					searchKey: {
						pName: ""
					},
					tableInfo: {
						columnInfo: [
							{
								title: "权限编号",
								key: "code",
							},
							{
								title: "权限名称",
								key: "name",
							},
							{
								title: "状态",
								slot: "status",
							},
							{
								title: "权限路径",
								key: "path",
							},
							{
								title: "父级权限编号",
								key: "pCode",
							},
							{
								title: "类型",
								slot: "leixing",
							},
							{
								title: "操作",
								slot: 'action',
								width: 150
							}
						],
						data: []
					}
				
			};
		},
		methods: {
			init: function() {
				this.tableInfo.currentPage = 0;
				this.search();
			},
			newPermission: function() {
				this.$router.detail.open({
					name: "permission_new"
				});
			},
			show: function(code) {
				this.$router.detail.open({
					name: "permission_detail",
					params: {
						code
					}
				});
			},
			search: function() {
				console.log(this.pageInfo.current);
				this.http.get({
					url: "/permission/page",
					param: {
						currentPage: this.pageInfo.current,
						name: this.searchKey.pName
					}
				}).then(data => {
					this.pageInfo.current = data.current;
					this.pageInfo.total = data.total;
					this.pageInfo.size = data.size;
					this.tableInfo.data = data.records;
				});
			},
			searchs: function() {
				this.pageInfo.current = 1;
				this.search();
				},
			pageSearch: function(changedPage) {
				this.pageInfo.current = changedPage;
				this.search();
			},
			remove: function(code) {
				
				this.message.confirm({
					title: "删除提示",
					content: "即将删除权限，确定吗？",
					onOk: () => {
						this.http.delete({
							url: "/permission/info",
							param: {
								code
							}
						}).then(data => {
							
							this.search();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
		},
		created: function() {
			this.init();
		},
	}
</script>

<style>
</style>
